<template>
  <div class="box">
    <div class="box-header">
      <span class="title">{{title}}</span>
    </div>
    <div class="box-body">
      <div class="chart fullsize" id="chart-eff2-exam"></div>
      <x-loading :show="showLoading"></x-loading>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import bus from "@/utils/bus";
import xLoading from "@/components/Loading";
import echarts from 'echarts'

export default {
  name: "",
  data() {
    return {
      showLoading: false,
      option: null,
      depName: null,
      startTime: null,
      chartInstance: null
    };
  },
  components: {
    "x-loading": xLoading
  },
  props: {
    title: String
  },
  methods: {
    renderChart() {
      this.showLoading = true;
      this.option = {
        tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
        legend: {
          data: ["政治教育学习分数", "干部绩效管理系统考评分数", "队伍智能化管理量化考评分数"],
          align: "right",
          right: 10,
          textStyle: { color: "#fff" },
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 35
        },
        grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
        xAxis: {
          type: "category",
          data: [],
          axisLine: {
            show: true,
            lineStyle: { color: "#ffffff25", width: 1, type: "solid" }
          },
          axisTick: { show: false },
          axisLabel: { show: true,interval:0,rotate:60,fontSize:12, textStyle: { color: "#fff" } }
        },
        yAxis: {
          type: "value",
          axisLabel: { formatter: "{value}",textStyle:{color:'#fff'} },
          axisTick: { show: false },
          axisLine: {
            show: true,
            lineStyle: { color: "#ffffff25", width: 1, type: "solid" }
          },
          splitLine: { show:true,lineStyle: { color: "#ffffff15" } }
        },
        series: [
          {
            name: "政治教育学习分数",
            stack: "总量",
            type: "bar",
            data: [],
            barWidth: 10, //柱子宽度
            barGap: 1, //柱子之间间距
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#008cff" },
                  { offset: 1, color: "#005193" }
                ]),
                opacity: 1
              }
            },
            label:{
                show:true,color:'#fff',fontSize:12,position:'inside',formatter:'{c}分'
            }
          },
          {
            name: "干部绩效管理系统考评分数",
            stack: "总量",
            type: "bar",
            data: [],
            barWidth: 10,
            barGap: 1,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#00da9c" },
                  { offset: 1, color: "#007a55" }
                ]),
                opacity: 1
              }
            },
            label:{
                show:true,color:'#fff',fontSize:12,position:'inside',formatter:'{c}分'
            }
          },
          {
            name: "队伍智能化管理量化考评分数",
            stack: "总量",
            type: "bar",
            data: [],
            barWidth: 10,
            barGap: 1,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#c4e300" },
                  { offset: 1, color: "#728400" }
                ]),
                opacity: 1
              }
            },
            label:{
                show:true,color:'#fff',fontSize:12,position:'top',formatter:'{c}分'
            }
          }
        ]
      };
      let params = {
        GroupName: this.depName,
        startTime: this.startTime
      };
      axios.get(this.URLHEAD_DVS + 'GetEffDataByDepartment',{params:params}).then(res=>{
          let json = res.data
          this.option.xAxis.data = json.Data.map(o=>{
              return o.userName
          })
          this.option.series[0].data = json.Data.map(o=>{
              return o.examScore.redGrade
          })
          this.option.series[1].data = json.Data.map(o=>{
              return o.examScore.depResult
          })
          this.option.series[2].data = json.Data.map(o=>{
              return o.examScore.amountResult
          })
          this.$Crender('chart-eff2-exam',this.option)
          this.showLoading = false
      })
    }
  },
  mounted() {
    bus.$on("eff-select-dep", msg => {
      this.depName = msg.depName;
      this.startTime = msg.startTime;
      this.renderChart();
    });
  }
};
</script>

<style lang="" scoped>
</style>